<template>
  <div class="app-container" ref="container">
    <el-space alignment="flex-start">
      <el-scrollbar>
        <div class="tree" justify="space-between" :style="{ width: treeWidth + 'px' }" ref="treeRef">
          <Tree :treeData="treeData" :defaultProps="defaultProps" nodeKey="id" :currentNodeKey="currentKey"
            @handleNodeClick="handleNodeClick" v-loading="loading" :isShowTitle="true" v-model:isExpand="isExpand" />
          <el-empty v-if="treeData.length == 0" description="暂无数据" />
        </div>
      </el-scrollbar>
      <div :class="[isProject ? 'isProject' : 'isSubject', 'queryList']" :style="{ width: queryListWidth + 'px' }" ref="list">
        <el-scrollbar>
          <router-view></router-view>
        </el-scrollbar>
      </div>
    </el-space>
  </div>
</template>
<script setup name="dataLoader">
import { getTreeList } from '@/api/projectManage/project'
import useTagsViewStore from '@/store/modules/tagsView'
import Tree from '@/components/Tree'
import useTreeSpace from '@/hooks/useTreeSpace'

const router = useRouter()
const route = useRoute()
const tagsViewStore = useTagsViewStore()
const { visitedViews } = storeToRefs(tagsViewStore)
const loading = ref(false)
const isProject = computed(() => route.name == 'dataLoaderProject')

// 项目专题树结构
const isExpand = ref(true)
const treeWidth = computed(() => isExpand.value ? 200 : 20)
const { container, treeRef, queryListWidth } = useTreeSpace(treeWidth.value)
const treeData = ref([])
const defaultProps = {
  children: 'list',
  label: 'name',
}
const getTreeData = () => {
  loading.value = true
  getTreeList().then(res => {
    treeData.value = res.data
    loading.value = false
  })
}

const subjectName = ref('')
const handleNodeClick = (data, node) => {
  currentKey.value = data.id
  if (node.level === 2) {
    subjectName.value = data.name
    router.push({ name: 'dataLoaderSubject', query: { id: data.id, name: data.name } })
  } else if (node.level === 1) {
    router.push({ name: 'dataLoaderProject', query: { projectId: data.id } })
  }
}

const currentKey = ref('')
onMounted(() => {
  getTreeData()
})

watch(visitedViews, () => {
  let subjectNum = visitedViews.value.filter(item => item.path.includes('/businessManage/dataLoader/subject')).length
  let projectSum = visitedViews.value.filter(item => item.path.includes('/businessManage/dataLoader/project')).length

  let newVisitedViews = visitedViews.value.slice(0, -1)
  if (subjectNum + projectSum > 1) {
    newVisitedViews.map((item) => {
      if (item.path.includes('/businessManage/dataLoader/subject')) {
        tagsViewStore.delView(item)
      }
      if (item.path.includes('/businessManage/dataLoader/project')) {
        tagsViewStore.delView(item)
      }
    })
  }
}, { deep: true, immediate: true })

watch([() => route.name, treeData], () => {
  if (route.name == 'dataLoaderProject') {
    if (treeData.value.length > 0) {
      currentKey.value = route.query.projectId || treeData.value[0].id
      router.push({ name: 'dataLoaderProject', query: { projectId: currentKey.value } })
    }
  } else if(route.name == 'spatialData' || route.name == 'otherData') {
    currentKey.value = route.query.id
  }
}, {immediate: true})
</script>
<style scoped lang="scss">
.app-container {
  height: 100%;

  .el-space {
    height: 100%;
    width: 100%;

    :deep(.el-space__item) {
      height: 100%;
    }

    .tree,
    .queryList {
      display: inline-block;
      height: 100%;
    }

    .isSubject {
      :deep(.el-scrollbar__view) {
        height: 100%;
      }
    }
  }
}
</style>